<template>
  <div class="box">
    <h1>添加城市</h1>
      <hr>
    <div class="main">
      
      <div>
        *开通城市
        <el-input class="input2" type="text" v-model="city"></el-input>

      </div>
    </div>
    <div class="save">
      <el-button type="primary" @click="addCity(city)" class="saveBtn">保存</el-button>
      <el-button type="primary" class="cancelBtn" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "",
    };
  },
  methods: {
    cancel() {
      this.$router.push('/setting/opencity')
    },
    addCity(city) {
      this.$http({
        url: "/city/add",
        method: "GET",
        params: {
          city,
        },
      })
        .then((res) => {
          console.log(res.data);
          this.$router.push('/setting/opencity')
        })
        .catch(() => { });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  min-width: 1200px;
  height: 1000px;
  // margin: 0 auto;

  h1 {
    font-size: 30px;
  }

  hr {
    margin: 20px 0 20px 0;
    border-top: 2px solid rgba(128, 128, 128, 0.753);
  }

  .main {
    // margin: 0 auto;
    text-align: center;
    width: 1200px;
    padding:100px 0 30px 0 ;

    .input2 {
      width: 260px;
    }
  }

  .save {
    text-align: center;
    padding: 30px 0;

    .saveBtn {
      margin-right: 50px;
      margin-left: -10px;
    }

    .cancelBtn {
      margin-left: 50px;
    }
  }
}
</style>